<template>
  <baidu-map class="map" :zoom="zoom"  :center="where">
    <!-- 比例尺控件 -->
    <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
    <!-- 缩放控件 -->
    <bm-navigation
    @click="huiwei"
    anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
    ></bm-navigation>
    <!-- 标签 -->
    <!-- 给标签绑定点击事件，获取经纬度，再将地图的中心设置为当前点击经纬度 -->
    <!-- 获取新的标签经纬度，增大zoom -->
    <bm-label
    v-for="(item,index) in list" :key="index"
    :title="item.value"
    :content="item.label+item.count+'套'"
    :position="postion[index] ? postion[index] : ''"
    :labelStyle="{color: '#fff', fontSize : '24px',backgroundColor:'rgba(12,181,106,.9)',
      border: '2px solid hsla(0,0%,100%,.8)',
      width: '70px',
      height: '70px',
      borderRadius: '100%',
      lineHeight:'70px',
      textAlign:'center',
      fontSize:'12px'
      }"
    @click="newlabel($event)"
    >
    </bm-label>
  </baidu-map>
</template>

<script>
export default {
  props: {
    list: {
      type: Array
    },
    where: {
      required: true
    },
    zoom: {
      type: Number
    },
    postion: {
      type: Array
    }
  },
  methods: {
    newlabel (e) {
      console.log(e.target.z.position.lat)
      this.$emit('cliclabel', e.target.z.title, { lng: e.target.point.lng, lat: e.target.point.lat })
    },
    huiwei () {
      console.log(1)
      this.$emit('clichuiwei')
    }
  }
}
</script>

<style lang="less" scoped>
.map {
  width: 100%;
  height: 100vh;
}
</style>
